<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function loadXMLDoc(){
            var xmlhttp;
            // if(window.XMLHttpRequest)表示判断浏览器是否支持xmlhttprequest对象，如果支持，直接创建，如果不支持，就创建ActiveXobject
            if(window.XMLHttpRequest){
                // 所有现代浏览器均支持XMLHttpRequest对象，除了ie5.ie6使用ActiveXobject
                //  IE7+, Firefox, Chrome, Opera, Safari 等浏览器执行代码
                // XMLHttpRequest用于在后台于服务器交换数据，异步，表示可以在不从新加载整个网页的情况下，对网页的某一部分进行更新
                xmlhttp=new XMLHttpRequest();
                // 这一步是创建xmlhttprequest对象
            }else{
                //  IE6, IE5浏览器执行代码
                xmlhttp=new ActiveXobject("Microsoft.XMLHTTP");
            }
            // 当异步即async=true时，要求响应在处于onreadystatechange事件中的就绪状态时执行函数
            // 当同步时，即async=false，就不用编写onreadystatechange函数，把代码放send函数后面即可
            // 当发送请求给服务器后，需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件
            xmlhttp.onreadystatechange=function(){ 
                // readyState[0--请求未初始化,1----服务器连接已建立,2---请求已接收,3---请求处理中,4---请求已完成，且响应已就绪]
                // status==200表示ok,==404表示未找到页面
                if(xmlhttp.readyState==4 && xmlhttp.status==200){// 此时表示响应已就绪
                    // 如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText（获得字符串形式的相应数据）或者responseXML（获得XML形式的相应数据）属性
                    document.getElementById('myDiv').innerHTML=xmlhttp.responseText;
                }
            }
            // 将请求发送到服务器
            // XMLHttpRequest对象如果要用于ajax的话，其open方法的async参数必须设置为true
            xmlhttp.open('POST','/try/ajax/demo_post2.php',true);
            // open('请求类型method','url',是否异步async) ture表示异步，false表示同步
            xmlhttp.setRequestHeader("Content-type","application/x-www.form-urlencoded");
            // 如果需要像html表单那样post数据，请使用setrequestheader(header,value)来向请求添加http头,header头名称，value规定头的值
            xmlhttp.send("fname=Henry&lname=Ford");
            // send(string)---将请求发送到服务器，string仅用于POST请求
        }
    </script>
</head>
<body>
    <div id="myDiv"><h2>使用ajax修改本文本内容</h2></div>
    <button type='button' onclick="loadXMLDoc()">修改内容</button>
</body>
</html>